<template>
  <div id="app">
    <div>
      app - {{ count }} - <button @click="add">+</button> -
      <button @click="cheng">*</button>
    </div>
    <Child1 />
    <Child2 />
  </div>
</template>

<script>
import Child1 from "./components/FirstChild.vue";
import Child2 from "./components/SecondChild.vue";
import { mapActions } from "vuex";
export default {
  name: "App",
  components: {
    Child1,
    Child2,
  },
  // data() {
  //   return {
  //     count: this.$store.state.count,
  //   };
  // },

  // 在组件里面要拿到仓库的数据只能使用计算属性
  computed: {
    count() {
      return this.$store.state.count;
    },
  },
  methods: {
    ...mapActions(["chengAsync"]),
    add() {
      // 不能直接改变，需要调用mutations里面的方法
      // this.$store.state.count++;

      this.$store.commit("increment", { num: 2 });
    },
    async cheng() {
      // this.$store.dispatch("chengAsync", { n: 4 });
      // this.chengAsync({ n: 5 }).then(() => {
      //   console.log(123);
      // });
      await this.chengAsync({ n: 5 });
      console.log(123);
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
